import { IRouteComponentProps, KnowledgeModelState, useSelector, history, Link, useDispatch } from "umi"
import { NavLink } from "react-router-dom"
import { Empty, Divider, Affix } from "antd"
import markdown from "../../../less/markdown.less"
import styles from "./index.less"
import { YYYY_MM_DD } from "@/components/timer/index"
import ArticleDetailNav from "@/components/rightcomp/rightother/rightfloor"
import HighLight from "@/components/HighLight"
import Comment from "@/components/comment/comment"
const KnowledgeKidDetail: React.FC<IRouteComponentProps<{ id: string, kid: string }>> = ({ match }) => {

    const id = match.params.id;
    console.log(id, "1111111111111111111111111111111111111111111111111");


    // 通过useSelector获取model数据
    const { knowledgsId } = useSelector((state: { knowledge: KnowledgeModelState }) => state.knowledge);
    console.log(knowledgsId, "22222222222222222222222222222222222222222222222222222");


    let lens = knowledgsId.children?.length;


    let newDate = knowledgsId.children?.filter(item => {
        return item.id == id
    })

    return <div className="container content">

        <div className={styles.link}>
            <span>
                <Link to="/knowledge" className={styles.link}>
                    知识小册
                </Link>{''}
            </span>&nbsp;
            / &nbsp;<span onClick={() => {
                history.goBack()
            }}>{knowledgsId.title}</span>&nbsp;
            /&nbsp;&nbsp;
            <span>
                {
                    newDate && newDate.map((item, index) => {
                        return <span key={index}>{item.title}</span>
                    })
                }
            </span>
        </div>
        <div className={styles.KnowledgeKidBox}>
            {newDate && newDate.length > 0 ? newDate.map(item => {
                return <div key={item.id} className={styles.KnowledgeKid_left}>
                    <div className={styles.KnowledgeKid_left_Top}>
                        <h1 className={styles.left_Top_h1}>{item.title}</h1>
                        <p className={styles.left_Top_p}>
                            <span>发布于{YYYY_MM_DD(item.publishAt)}</span>
                            <span>·</span>
                            <span>阅读量{item.views}</span>
                        </p>
                    </div>
                    <HighLight>
                        <div dangerouslySetInnerHTML={{ __html: item.html! }} className={markdown.markdown}></div>
                    </HighLight>
                    <div className={styles.left_footers}>
                        <span>发布于{YYYY_MM_DD(item.updateAt)}</span>
                        <span>&nbsp;|&nbsp;</span>
                        <span>版权信息:<a href="https://creativecommons.org/licenses/by-nc/3.0/cn/deed.zh" target="_blank" rel="noreferrer">非商用-署名-自由转载</a></span>
                    </div>
                    <Divider />
                    <div className={styles.detail_chapter_order}>
                        {

                            knowledgsId.children && knowledgsId.children.length > 1 ? knowledgsId.children.map((item, index) => {

                                if (item.id !== id && lens === 2) {
                                    console.log(item, id, "item------------------------------------------------")
                                    if (index == 0) {
                                        return <div className={styles.chapter_left} key={item.id}>
                                            <Link to={{ pathname: `/knowledge/${knowledgsId.id}/${item.id}`, state: knowledgsId }}  >
                                                <span className={styles.detail_point}>
                                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg>
                                                </span>
                                                <span>{item.title}</span>
                                            </Link></div>
                                    }
                                    return <div className={styles.chapter_big_marger} key={item.id}>
                                        <Link to={{ pathname: `/knowledge/${knowledgsId.id}/${item.id}`, state: knowledgsId }} className={styles.sharp_end}>
                                            <span>{item.title}</span>
                                            <span className={styles.detail_point}>
                                                <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg>
                                            </span>
                                        </Link></div>
                                }
                                else if (item.id == id && lens! > 2) {
                                    if (index === 0) {
                                        return <div className={styles.chapter_big_marger} key={item.id}>
                                            <Link to={{ pathname: `/knowledge/${knowledgsId.id}/${knowledgsId.children![index + 1].id}`, state: knowledgsId }} className={styles.sharp_end}>
                                                <span>{knowledgsId.children![index + 1].title}</span>
                                                <span className={styles.detail_point}>
                                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg>
                                                </span>
                                            </Link></div>
                                    } else if (index === lens! - 1) {
                                        return <div className={styles.chapter_left} key={item.id}>
                                            <Link to={{ pathname: `/knowledge/${knowledgsId.id}/${knowledgsId.children![index - 1].id}`, state: knowledgsId }} >
                                                <span className={styles.detail_point}>
                                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg>
                                                </span>
                                                <span>{knowledgsId.children![index - 1].title}</span>
                                            </Link></div>
                                    }
                                    return <div className={styles.middle_chapter} key={item.id}>
                                        <div className={styles.chapter_margin}>
                                            <Link to={{ pathname: `/knowledge/${knowledgsId.id}/${knowledgsId.children![index - 1].id}`, state: knowledgsId }} >
                                                <span className={styles.detail_point}>
                                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg>
                                                </span>
                                                <span>{knowledgsId.children![index - 1].title}</span>
                                            </Link>
                                        </div>
                                        <div className={styles.chapter_margin}>

                                            <Link to={{ pathname: `/knowledge/${knowledgsId.id}/${knowledgsId.children![index + 1].id}`, state: knowledgsId }} className={styles.right_chapter} >
                                                <span>{knowledgsId.children![index + 1].title}</span>
                                                <span className={styles.detail_point}>
                                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg>
                                                </span>
                                            </Link>
                                        </div>

                                    </div>
                                }
                            }) : null
                        }
                    </div>
                    <div className={styles.commentsBox}>
                        {
                            newDate?.map(item=>{
                                return <div className={styles.commentsBox}>
                                    <Comment id={item.id} />
                                </div>
                            })
                        }
                    </div>
                </div>
            }) : <div>
                <Empty />
            </div>
            }

            <div className={styles.KnowledgeKid_right}>

                <div className={styles.KnowledgeBox}>
                    <div className={styles.KnowledgeBox_header}>
                        {knowledgsId.title}
                    </div>
                    <div className={styles.KnowledgeBox_main}>
                        <ul className={styles.KnowledgeBox_main_ul}>
                            {knowledgsId.children?.map((item, index) => {
                                return <li key={index} className={styles.KnowledgeBox_main_ul_li}>
                                    <NavLink to={`/knowledge/${knowledgsId.id}/${item.id}`} activeClassName={styles.active}>
                                        {item.title}
                                    </NavLink>
                                </li>
                            })}
                        </ul>

                    </div>


                </div>
                <Affix offsetTop={70}>
                    <div className={styles.catalogue}>
                        {
                            newDate?.map(item => {
                                return <div key={item.id}> <ArticleDetailNav toc={item.toc}></ArticleDetailNav></div>
                            })
                        }

                    </div>
                </Affix>
            </div>

        </div>
    </div>

}
export default KnowledgeKidDetail;